<template>
  <!-- 圈子成员管理页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_"> 圈子成员管理 </view>
      <view class="right_"></view>
    </view>

    <!-- 搜索框 -->
    <view class="top_m">
      <view class="top_s">
        <view class="left">
          <icon type="search" size="13" />
        </view>
        <view class="right">
          <input
            type="text"
            :value="is_input"
            placeholder="搜索成员"
            placeholder-style="color:rgba(153,153,153,1);font-size:24rpx"
            @confirm="handleInput"
            @input="handleInput1"
          />
        </view>
        <view class="end" v-if="is_input != ''" @tap="handleClear">
          <icon type="clear" size="13" color="#000" />
        </view>
      </view>
      <navigator
        :url="'/pages/my_circle/inviter?id=' + quan_id + '&type=1'"
        hover-class="none"
        class="icon_"
      >
        <!--  <image src="../../images/aliang/yaoqing.png" mode="aspectFill"></image> -->
      </navigator>
    </view>
    <view class="content">
      <view class="tab">
        <view
          :class="[activeIndex == index1 ? 'item active' : 'item']"
          v-for="(item, index1) in ['全部', '禁言', '拉黑']"
          :key="index1"
          @tap="handleTab(index1)"
        >
          <text> {{ item }}</text>
          <text class="xian" v-if="activeIndex == index1"></text>
        </view>
      </view>

      <view class="list">
        <view class="item" v-for="(item, index) in memberList" :key="index">
          <navigator
            :url="'/pages/index/personal?id=' + item.userId"
            class="left"
            hover-class="none"
          >
            <image :src="item.avatarUrl" mode="aspectFill"></image>
            <text>{{ item.applyName }}</text>
          </navigator>
          <view class="right" v-if="item.isOrg == 0">
            <view
              class="child"
              v-if="item.isEstoppel == 0 && activeIndex != 2"
              @tap="handleShutup(item.id)"
            >
              禁言
            </view>
            <view
              class="child1"
              v-if="item.isEstoppel == 1 && activeIndex != 2"
              @tap="handleShutupNo(item.id)"
            >
              解禁
            </view>
            <view
              class="child2"
              v-if="item.isBlock == 0 && activeIndex != 1"
              @tap="handleBlock(item.id)"
            >
              拉黑
            </view>
            <view
              class="child3"
              v-if="item.isBlock == 1 && activeIndex != 1"
              @tap="handleBlockNo(item.id)"
            >
              恢复
            </view>
          </view>
        </view>
      </view>
      <!-- 暂无成员状态 -->
      <view class="wu_Huo" v-if="memberList.length == 0">
        <image
          src="../../images/aliang/wuhuodong.png"
          mode="aspectFill"
        ></image>
        <text>暂无成员</text>
      </view>
      <!--</swiper-item>
			</swiper> -->
    </view>
  </view>
</template>
<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      is_input: "",
      activeIndex: 0,
      memberList: [], //成员列表
      isBlock: 0,
      isEstoppel: 0,
      pageSize: 18,
      bottom: false,
      quan_id: "",
      isStriking: true,
    };
  },
  onLoad(options) {
    this.quan_id = options.id;
    this.memberListH();
    // 圈子成员列表;
  },
  onPullDownRefresh() {
    this.pageSize = 18;
    setTimeout(() => {
      this.memberListH();
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
        icon: "none",
      });
    }, 1000);
  },
  onReachBottom() {
    if (!this.isStriking) {
      return false;
    }
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 18;
    this.bottom = true;
    this.memberListH();
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    handleShutup(index) {
      //禁言
      this.bottom = false;
      this.memberHandle(1, index);
    },
    handleShutupNo(index) {
      //不禁言
      this.bottom = false;
      this.memberHandle(0, index);
    },
    handleBlock(index) {
      //拉黑
      this.bottom = false;
      this.memberHandleB(1, index);
    },
    handleBlockNo(index) {
      //不拉黑
      this.bottom = false;
      this.memberHandleB(0, index);
    },
    memberHandleB(isBlock, index) {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/updateBlockAndEstoppel",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: index,
            isBlock: isBlock,
          },
        }).then((res) => {
          // console.log(res, '操作')
          if (res.data.code == 200) {
            this.memberListH();
            if (isBlock == 1) {
              uni.showToast({
                title: "已拉黑",
                duration: 1000,
                icon: "none",
              });
            } else if (isBlock == 0) {
              uni.showToast({
                title: "已恢复",
                duration: 1000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    memberHandle(isEstoppel, index) {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/updateBlockAndEstoppel",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: index,
            isEstoppel: isEstoppel,
          },
        }).then((res) => {
          // console.log(res, '操作')
          if (res.data.code == 200) {
            this.memberListH();
            if (isEstoppel == 1) {
              uni.showToast({
                title: "已禁言",
                duration: 2000,
                icon: "none",
              });
            } else if (isEstoppel == 0) {
              uni.showToast({
                title: "已解禁",
                duration: 2000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    memberListH() {
      //成员列表
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/memberList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quan_id,
            isBlock: this.isBlock,
            isEstoppel: this.isEstoppel,
            name: this.is_input,
            pageSize: this.pageSize,
            pageNumber: 1,
          },
        }).then((res) => {
          // console.log(res, '圈子成员')
          if (res.data.code == 200) {
            this.memberList = res.data.data.rows;
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              this.pageSize != 18 &&
              this.bottom &&
              this.memberList.length != 0
            ) {
              uni.hideLoading();

              if (this.memberList.length < res.data.data.total) {
                uni.showToast({
                  title: "加载完成",
                  duration: 1000,
                  icon: "none",
                });
              } else if (this.memberList.length >= res.data.data.total) {
                uni.showToast({
                  title: "没有更多数据了",
                  duration: 1000,
                  icon: "none",
                });
                this.isStriking = false;
              }
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleInput1(e) {
      //输入事件
      this.is_input = e.detail.value;
    },
    handleClear() {
      //清除文本框
      this.bottom = false;
      this.is_input = "";
      this.memberListH();
    },
    handleInput(e) {
      //失焦事件（执行调用）
      this.bottom = false;
      this.is_input = e.detail.value;
      this.memberListH();
    },
    handleTab(index) {
      this.isStriking = true;
      this.bottom = false;
      this.activeIndex = index;
      if (index == 0) {
        this.isBlock = 0;
        this.isEstoppel = 0;
        this.memberListH();
      } else if (index == 1) {
        this.isEstoppel = 1;
        this.isBlock = 0;
        this.memberListH();
      } else if (index == 2) {
        this.isBlock = 1;
        this.isEstoppel = 0;
        this.memberListH();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.top_tou {
  box-sizing: border-box;
  display: flex;
  padding: 0 38rpx;
  width: 750rpx;
  height: 92rpx;
  background: #f8f8f8;
  line-height: 92rpx;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  .left_ {
    height: 28rpx;
    width: 18rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .center_ {
    font-size: 36rpx;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    color: #111111;
  }

  .right_ {
    width: 18rpx;
  }
}

.wu_Huo {
  margin-top: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 320rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}

.main {
  height: 100vh;
  border-top: 2rpx solid #ddddddff;
  padding: 20rpx 0;
  padding-top: 112rpx;

  .top_m {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22rpx;
    box-sizing: border-box;

    .icon_ {
      width: 38rpx;
      height: 38rpx;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .top_s {
    margin: 0 auto;
    width: 630rpx;
    height: 70rpx;
    background: #fff;
    box-shadow: 2rpx 2prx 30rpx 2rpx rgba(0, 0, 0, 0.06);
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #0000000f;
    padding: 0 22rpx;
    box-sizing: border-box;

    .left {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 6rpx;
    }

    .right {
      flex: 1;

      input {
        width: 100%;
        height: 100%;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }

    .end {
      height: 100%;
      display: flex;
      align-items: center;
      width: 50rpx;
      justify-content: center;
    }
  }

  .content {
    padding-top: 38rpx;
    background-color: #fff;

    .tab {
      padding: 0 32rpx;
      display: flex;
      justify-content: space-around;

      .item {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);

        .xian {
          display: block;
          width: 36rpx;
          height: 6rpx;
          background: rgba(33, 104, 235, 1);
          border-radius: 3rpx;
          margin-left: 15rpx;
          margin-top: 4rpx;
        }
      }

      .active {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }

    .list {
      margin-top: 20rpx;
      padding: 0 32rpx;

      .item {
        height: 66rpx;
        padding: 20rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-bottom: 2rpx solid #eee;

        &:last-child {
          border-bottom: none;
        }

        .left {
          display: flex;
          align-items: center;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);

          image {
            width: 66rpx;
            height: 66rpx;
            border-radius: 50%;
            margin-right: 15rpx;
          }
        }

        .right {
          display: flex;

          view {
            margin-left: 30rpx;
            width: 74rpx;
            height: 34rpx;
            box-sizing: border-box;
            line-height: 34rpx;
            text-align: center;
          }

          .child {
            border-radius: 21rpx;
            border: 2rpx solid rgba(33, 104, 235, 1);
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(33, 104, 235, 1);
            line-height: 31.5rpx;
          }

          .child1 {
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            background-color: #2168eb;
            border-radius: 21rpx;
          }

          .child2 {
            border-radius: 21rpx;
            border: 2rpx solid rgba(248, 20, 20, 1);
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(248, 20, 20, 1);
            line-height: 31.5rpx;
          }

          .child3 {
            background: rgba(248, 20, 20, 1);
            border-radius: 21rpx;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
}
</style>
